* {
    font-size: inherit;
    font-family: inherit;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    word-break: break-all;
    outline: none;
    &::-webkit-input-placeholder {
        font-size: 1.3rem;
        color: lighten(@color_g, 25%)
    }
    &::-webkit-scrollbar {
        display: none;
    }
}
body {
    &.zoom {
        zoom: 1;
    }
}
html, body, #root {
    position: relative;
    width: 100%;
    height: 100%;
    line-height: @line_height;
    background-color: @color_bg;
    font-family: @font;
    color: @color_n;
    overflow: hidden;
}
html, body, header, footer, menu, nav, article, main, aside, div, ul, ol, li, dl, dt, dd, p {
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
    .noselected;
}
html{
    font-size: 10px;
}
a, img, button, input, textarea, label {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    outline: none;
}
input[disabled] {
    opacity: 1;
    color: @color_n;
    background: transparent;
}
a {
    color: inherit;
    text-decoration: none;
}
img {
    max-width: 100%;
    max-height: 100%;
    border: 0;
    display: block;
}
h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: normal;
    margin: 0;
}
table {
    border-collapse: collapse;
    width: 100%;
    &.fixed {
        table-layout: fixed;
    }
    th, td {
        padding: 0;
        vertical-align: middle;
        text-align: left;
    }
}
input[type=text], input[type=password], input[type=number], input[type=phone], input[type=email], input[type="search"], textarea {
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    text-indent: @space/2;
    -webkit-appearance: none;
    appearance: none;
}
textarea {
    min-height: 4em;
}
.fix_center{
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    display: block;
}
.nowrap {
    white-space: nowrap;
}
.clearfix {
    &:after, &:before {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}
.blur(@blur:1px) {
    -webkit-filter: blur(@blur);
    filter: blur(@blur);
}
.noselected {
    -webkit-user-select: none;
    user-select: none;
}
.onselected {
    -webkit-user-select: text;
    user-select: text;
}
.text-hide {
    font: 0/0;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}
.hide {
    display: none !important;
}
.show {
    display: block !important;
}
.space {
    display: block;
    clear: both;
    height:@space;
    overflow: hidden;
}
#root{
    font-size: 1.3rem;
    background: @color_w;
    padding:20px 0 0;
    &.root{
        padding:1px;
    }
}
.app_warp, .app_wedget_win {
    .radius_t(@space/2);
    color: inherit;
    font-size: inherit;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 100%;
    border: solid 0 transparent;
    overflow: hidden;
    .onselected {
        .onselected;
    }
    .app_main, .app_wedget_win_main {
        -webkit-box-flex: 1;
        overflow-y: auto;
        overflow-scrolling: touch;
        -webkit-overflow-scrolling: touch;
        height: 100%;
        position: relative;
        background-color: @color_bg;
        padding: 0 0 @space;
    }
}
.app_mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .75);
    z-index: @z-mask;
}
.app_warp {
    z-index: @z-main;
}
.app_head {
    position: relative;
    text-align: center;
    height: @app_head_height;
    box-sizing: content-box;
    background: @color_w;
    border-bottom: @border_h;
    z-index:@z-head;
    .left, .right, .name ,.input{
        display: block;
        position: absolute;
        bottom: 0;
        height: @app_head_height;
        line-height: @app_head_height+0.1;
    }
    .left {
        left: 10px;
        z-index: 3;
        text-indent: -10em;
    }
    .right {
        right: 10px;
        z-index: 2;
    }
    .name{
        font-size: 18px;
        width: 60%;
        left: 20%;
        z-index: 1;
        img{
            position: absolute;
            .block(@app_head_height/2);
            height:50%;
            bottom:50%;
            left:50%;
            margin:0 0 -@app_head_height/4 -@app_head_height/4;
        }
    }
    .input{
        width: 74%;
        left: 13%;
        z-index: 1;
        input{
            font-size: 1.3rem;
            color: @color_w;
            width:100%;
            height:-@space*3+@app_head_height;
            margin:@space*1.5 0 0;
            text-align: center;
            display: block;
            background: @color_gn;
            .radius_a(@space);
            &::-webkit-input-placeholder {
                font-size: 1.3rem;
                color: @color_h
            }
        }
    }
    .back {
        left: 0;
        &::before {
            content: '';
            display: block;
            .block(@app_head_height);
            background: url(./img/common/back.png) center no-repeat;
            background-size: 64%;
        }
    }
    .my{
        left: @space;
        top: @space;
        img{
            display: block;
            .block(-@space*2+@app_head_height);
            background: url(./img/common/my.png) center no-repeat;
            background-size: 98%;
            .radius_a(50%);
        }
    }
    .login{
        &::before {
            content: '';
            display: block;
            .block(@app_head_height);
            background: url(./img/common/login.png) center no-repeat;
            background-size: 64%;
        }
        &.logined{
            img{
                margin:@space 0 0 @space;
                height:(-@space*2)+@app_head_height;
                width:(-@space*2)+@app_head_height;
                .radius_a(50%);
            }
            &::before{
                display: none;
            }
        }
    }
    .logout{
        color: @color_skin;
        padding:0 @space*2;
    }
    .search {
        &::before {
            content: '';
            display: block;
            .block(@app_head_height);
            background: url(./img/common/search.png) center no-repeat;
            background-size: 64%;
        }
    }
    .close_search{
        width: 13%;
        text-align: center;
        right: 0;
        &::after{
            .ablock;
            .block(-@space*4+@app_head_height);
            bottom:@space*2;
            right:50%;
            margin:0 -(-@space*4+@app_head_height)/2 0 0;
            background: @color_gn url('./img/cancel-128.png')center no-repeat;
            background-size: auto 50%;
            .radius_a(50%);
        }
    }
    .share{
        &::before {
            content: '';
            display: block;
            .block(@app_head_height);
            background: url(./img/common/share.png) center no-repeat;
            background-size: 64%;
        }
    }
    .menu{
        &::before {
            content: '';
            display: block;
            .block(@app_head_height);
            background: url(./img/common/menu.png) center no-repeat;
            background-size: 64%;
        }
    }
}
.app_foot{
    font-size: 12px;
    height:55px;
    border-top: @border_h;
    background-color: @color_w;
    z-index:@z-foot;
    position: relative;
    a{
        display: block;
        float: left;
        height:55px;
        line-height:18px;
        color: @color_g;
        width:20%;
        text-align: center;
        padding:34px 0 0;
        background: transparent no-repeat center 2px;
        background-size: auto 34px;
        &.active{
            color: @color_skin;
        }
    }
    #app_foot_home{
        background-image: url(./img/foot/home_g.gif);
        &.active{
            background-image: url(./img/foot/home_c.gif);
        }
    }
    #app_foot_classroom{
        background-image: url(./img/foot/video_g.gif);
        &.active{
            background-image: url(./img/foot/video_c.gif);
        }
    }
    #app_foot_artcircle{
        background-image: url(./img/foot/comment_g.gif);
        &.active{
            background-image: url(./img/foot/comment_c.gif);
        }
    }
    #app_foot_mechanism{
        background-image: url(./img/foot/com_g.gif);
        &.active{
            background-image: url(./img/foot/com_c.gif);
        }
    }
    #app_foot_yuanxiao{
        background-image: url(./img/foot/yuanxiao_g.gif);
        &.active{
            background-image: url(./img/foot/yuanxiao_c.gif);
        }
    }
}
.app_pageform {
    background: @color_w;
    .weui-cells {
        font-size: inherit;
        margin: 0;
        &:before, &:after {
            display: none;
        }
    }
    .weui-cell {
        padding: 0;
        line-height: 3.8rem;
    }
    li {
        border-bottom: @border_h;
        position: relative;
        min-height: 3.8rem;
        &.pic {
            .name {
                top: 1.25rem;
            }
            .val {
                height: 7.6rem;
                padding: 0;
                position: relative;
                img {
                    position: absolute;
                    top: 1.5rem;
                    right: 0;
                    .block(4.6rem);
                    margin: 0;
                    display: block;
                }
            }
        }
        line-height: 3.8rem;
        padding: 0 1rem 0 5em;
        &:last-child {
            border: 0;
        }
        .name, .val, .switch {
            font-size: 1.4rem;
            display: block;
        }
        .name {
            position: absolute;
            top: 0;
            left: 1rem;
        }
        .val {
            font-size: 1.5rem;
            min-height: 3.8rem;
            text-align: right;
            input {
                font-size: 1.5rem;
                text-align: right;
                width: 100%;
                height: 3.8rem;
            }
            &.in {
                padding-right: 2rem;
                background: url('./img/common/enterin.png') right center no-repeat;
                background-size: auto 1.5rem;
            }
        }
        .switch {
            font-size: 1.5rem;
            text-align: right;
            min-height: 3.8rem;
            background: url('img/common/switch_off.png') right center no-repeat;
            background-size: auto 2.4rem;
            &.open {
                background-image: url('img/common/switch_on.png');
            }
        }
    }
}
.space_col{
    padding:@space @space*2;
    &.ct{
        padding-top: 0;
    }
    &.cb{
        padding-bottom: 0;
    }
}
.app_loading_btn {
    margin: 1rem 1.2rem;
    line-height: 4rem;
    display: block;
    border: @border_skin;
    color: @color_skin;
    text-align: center;
    .radius_a(@space);
    background: #e1fff0;
}
.app_tags {
    padding: @space*2 @space*2 @space;
    margin: 0 0 @space;
    .app_tagstit{
        color: @color_skin;
        display: block;
        padding:0 0 @space;
        i{
            color: @color_g;
            font-style: normal;
            fontsize: 75%;
        }
    }
    &.tac{
        text-align: center !important;
        .tag{
            margin:0 auto @space/2;
            padding: @space/2 @space*3;
        }
    }
    .tag {
        font-size: 1.3rem;
        padding: @space/2 @space;
        .radius_a;
        display: inline-block;
        margin:0 @space/2 @space/2 0;
        background: @color_w;
        .nowrap;
        color: @color_g;
        border: @border_h;
        &.current,&.active {
            color: @color_skin;
            border: @border_skin;
        }
    }
}
.img-container {
}
.app_foot_btnline {
    height: 4.2rem;
    line-height: 4.2rem;
    a.btn {
        font-size: 1.5rem;
        display: block;
        color: @color_w;
        background: @color_skin;
        text-align: center;
        &.btn_w {
            color: @color_skin;
            background: @color_w;
        }
    }
    &.col2 a {
        width: 50%;
        float: left;
    }
}
.flex {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 0;
    clear: both;
}
.flex_col {
    -webkit-box-flex: 1;
    overflow-y: auto;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    position: relative;
}
.menuflex(@height:3.6rem){
    width: 100%;
    height: @height;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.menuflex_col{
    flex:1
}
.app_selmenu {
    @thisHeight:4rem;
    height:@thisHeight;
    line-height: @thisHeight;
    text-align: center;
    position: relative;
    padding:0 5%;
    background: @color_w;
    border-bottom: @border_h;
    z-index:2;
    &:after{
        .ablock;
        height:@space*3;
        width:1px;
        background: @color_h;
        position: absolute;
        top:50%;
        right:5%;
        margin:-@space*1.5 -1px 0 0;
    }
    &.col2 a.menu{
        width:50%;
    }
    &.col3 a.menu{
        width:33.3%;
    }
    &.col4 a.menu{
        width:25%;
    }
    a.menu {
        color: @color_g;
        line-height: @thisHeight;
        display: block;
        float: left;
        position: relative;
        overflow: hidden;
        &::after,&::before{
            .ablock;
        }
        &:before{
            .ablock;
            height:@space*3;
            width:1px;
            background: @color_h;
            position: absolute;
            top:50%;
            left:0;
            margin:-@space*1.5 0 0 0;
        }
        &::after{
            .block(@space*2);
            background: @color_h;
            top:50%;
            right:@space*2;
            margin:-@space 0 0;
            z-index:2;
            background: url(./img/common/downups.gif)left top no-repeat;
            background-size: 100% auto;
        }
        &.active{
            color: @color_skin;
            &::after{
                background-position: left bottom;
            }
        }
    }
    ul.app_sel_sub_menu {
        display: none;
        position: absolute;
        z-index: 3;
        top: 96%;
        left:2%;
        width: 96%;
        border-bottom: @border_h;
        text-align: left;
        margin:1px 0 0;
        background-color: @color_w;
        max-height: @thisHeight*6.5;
        padding:@space/2 0 0;
        overflow-y: scroll;
        border:@space/2 solid @color_skin;
        .radius_a(@space);
        .boxshow;
        li {
            .radius_a(@space/2);
            padding:0 0 0 @space*4;
            position: relative;
            line-height: @thisHeight;
            overflow: hidden;
            background-color: @color_bg;
            margin:0 @space/2 @space/2;
            &.active {
                color: @color_w;
                background-color: @color_skin;
                &::after{
                    .ablock;
                    top: 50%;
                    right: @space*2;
                    background: @color_skin url(./img/ok-128.png)center no-repeat;
                    background-size: 80% auto;
                    .block(@space*4);
                    margin: -@space*2 0 0;
                    .radius_a(50%);
                }
            }
        }
    }
}
.common_infowin {
    position: fixed;
    background: rgba(0, 0, 0, .25);
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 98;
    .common_infowin_inner {
        position: relative;
        top: 10%;
        left: 10%;
        width: 80%;
        height: 80%;
        z-index: 201;
        background: @color_w;
        overflow: hidden;
        .radius_a(1rem);
    }
    .tit {
        text-align: center;
        height: 3em;
        line-height: 3em;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 203;
        background: @color_w;
        .close {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 1.5em;
            .block(1.5em);
            line-height: 1.5em;
            text-align: center;
            color: @color_skin;
            &::after {
                content: '×'
            }
        }
    }
    .btn_line {
        position: absolute;
        background: @color_w;
        bottom: 0;
        width: 100%;
        text-align: center;
        height: 4em;
        border-top: @border_h;
        z-index: 203;
        a {
            height: 3em;
            line-height: 3em;
            margin: .5em 20% 0;
            .radius_a(.5em);
        }
    }
    .cont {
        height: 100%;
        box-sizing: content-box;
        overflow-y: scroll;
        z-index: 202;
        .inner_cont {
            padding: 4em 1.5em 5em;
            h3 {
                padding: 1em 0;
            }
            p {
                padding: .5em;
                font-size: 85%;
            }
        }
    }
}
.app_pageform {
    background: @color_w;
    &.v_left {
        li {
            .val {
                text-align: left;
            }
        }
    }
    li {
        border-bottom: @border_h;
        position: relative;
        min-height: 3.8rem;
        &.pic {
            .name {
                top: 1.25rem;
            }
            .val {
                height: 7.6rem;
                padding: 0;
                position: relative;
                img {
                    position: absolute;
                    top: 1.5rem;
                    right: 0;
                    .block(4.6rem);
                    margin: 0;
                    .radius_a(50%);
                    display: block;
                }
                &.in img {
                    margin-right: 2rem;
                }
            }
        }
        line-height: 3.8rem;
        padding: 0 1rem 0 8em;
        &:last-child {
            border: 0;
        }
        .name, .val, .switch {
            display: block;
        }
        .name {
            position: absolute;
            top: 0;
            left: 1rem;
        }
        .val {
            font-size: 1.5rem;
            min-height: 3.8rem;
            text-align: right;
            input {
                font-size: 1.5rem;
                text-align: right;
                width: 100%;
                height: 3.8rem;
            }
            &.in {
                padding-right: 2rem;
                background: url('./img/common/enterin.png') right center no-repeat;
                background-size: auto 1.5rem;
            }
        }
        .switch {
            font-size: 1.5rem;
            text-align: right;
            min-height: 3.8rem;
            background: url('img/common/switch_off.png') right center no-repeat;
            background-size: auto 2.4rem;
            &.close {
                background-image: url('img/common/switch_on.png');
            }
        }
    }
}
.component_loading{
    background: @color_w url(./img/loading.gif) center no-repeat;
    background-size: auto 2.8rem;
    height:100%;
    width:100%;
}
.common_loading {
    .app_mask;
    background: rgba(0,0,0,0);
    img {
        position: absolute;
        bottom: 22.5%;
        left: 45%;
        width: 10%;
        margin: 0 0 0 -2px;
        border: 4px solid #fff;
        border-radius: 50%;
        background: @color_w;
    }
    span {
        position: absolute;
        top: 80%;
        left: 10%;
        width: 80%;
        display: block;
        text-align: center;
        color: @color_w;
        font-size: 1.4rem;
        padding: @space*2 0;
        &.close_loading {
            top:@space*4;
            left:auto;
            margin:30px 0 0;
            right:@space*4;
            border:@border_w;
            .block(30px);
            overflow: hidden;
            padding:0;
            .radius_a(50%);
            background:rgba(255,255,255,0.1) url(./img/cancel-128.png)center no-repeat;
            background-size:auto 50%;
        }
    }

}
.common_msg {
    font-size: 1.3rem;
    padding: @space;
    span {
        text-align: center;
        padding: @space;
        display: block;
        .radius_a(@space/2);
        color: #ffbe00;
        border: 1px solid #ffbe00;
        background-color: lighten(#ffbe00, 40%);
    }
}
.app_tab {
    text-align: center;
    overflow: hidden;
    border-bottom: @border_h;
    background: @color_w;
    height: 5rem;
    line-height: 5rem;
    margin: 0 0 1px;
    &.transparent{
        background: transparent;
        margin: 0;
    }
    a {
        border-radius: 0;
        border: 0;
        color: @color_g;
        margin: 0 -1px;
        height: 5rem;
        font-size: 1.4rem;
        line-height: 5rem;
        background: transparent;
        overflow: hidden;
        &.selected {
            color: @color_skin;
            height: 4.5rem;
            line-height: 5rem;
            border-bottom: @border_skin;
            border-bottom-width: .5rem;
            .transition(.5s, background);
        }
        float: left;
        position: relative;
    }
    &.col1 {
        padding: 0 10%;
        a {
            width: 100%;
        }
    }
    &.col2 {
        padding: 0 5%;
        a {
            width: 50%;
        }
    }
    &.col3 {
        padding: 0 5%;
        a {
            width: 33.33%;
        }
    }
    &.col4 {
        padding: 0 5%;
        a {
            width: 25%;
        }
    }
    &.col5 {
        padding: 0 5%;
        a {
            width: 20%;
        }
    }
}
.skin_btn {
    font-size: 1.5rem;
    display: block;
    color: @color_w;
    background: @color_skin;
    text-align: center;
    height: 4.2rem;
    line-height: 4.2rem;
    &.radius_btn{
        .radius_a(@space*3);
        margin:0 15%;
    }
    &.borderbtn{
        color: @color_skin;
        background-color: lighten(@color_skin,35%);
        border: @border_skin;
    }
}
.bgw {
    background: @color_w;
}
.bg {
    background: @color_bg;
}
.loading_line{
    text-align: center;
    padding: @space*4 0;
    position: relative;
    &::before{
        .ablock;
        top: 50%;
        left: 5%;
        width:90%;
        height:1px;
        border-top: 1px dotted @color_h;
        z-index:1;
    }
    .loading_more{
        position: relative;
        width: @space*8+1.2*6;
        height:3rem;
        overflow: hidden;
        display: block;
        margin:0 auto;
        font-size: 1.2rem;
        color: @color_gn;
        background: @color_bg;
        border: 1px dotted @color_h;
        .radius_a(@space*4);
        z-index:1;
        &::before,&::after{
            display: block;
            position: absolute;
            width:100%;
        }
        &::before{
            top:0;
            left: 0;
            height:50%;
            margin: 6% 0 0;
            content: '加载下一页';
        }
        &.nomore::before{
            content: '没有更多了';
        }
        &::after{
            content: ' ';
            height:100%;
            bottom:-100%;
            left:0;
            .transition(.5s,bottom);
            .component_loading;
        }
        &.active::after{
            bottom:0;
        }
    }
}